import React, {useEffect, useState} from 'react';
import {Search} from 'lucide-react';
import {Req} from "../../util/fetch.ts";

interface TrainingOrder {
  id: number;
  user: {
    realname: string;
    position: string;
    avatarUrl: string;
  };
  startDate: string;
  endDate: string;
  place: string;
  title: string;
  expectedPersonCount: number;
  budget: number;
  notes: string;
  status: 'pending' | 'approved' | 'rejected';
  crtTime: string;
}


export default function AdminTrainingOrders() {
  const [orders, setOrders] = useState<TrainingOrder[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  // const [showFilters, setShowFilters] = useState(false);
  // const [selectedStatus, setSelectedStatus] = useState<string>('all');

  // const getStatusStyle = (status: TrainingOrder['status']) => {
  //   switch (status) {
  //     case 'pending':
  //       return 'bg-yellow-100 text-yellow-600';
  //     case 'approved':
  //       return 'bg-green-100 text-green-600';
  //     case 'rejected':
  //       return 'bg-red-100 text-red-600';
  //     default:
  //       return 'bg-gray-100 text-gray-600';
  //   }
  // };
  //
  // const getStatusText = (status: TrainingOrder['status']) => {
  //   switch (status) {
  //     case 'pending':
  //       return '待处理';
  //     case 'approved':
  //       return '已通过';
  //     case 'rejected':
  //       return '已拒绝';
  //     default:
  //       return '未知状态';
  //   }
  // };
  //
  // const getStatusIcon = (status: TrainingOrder['status']) => {
  //   switch (status) {
  //     case 'pending':
  //       return <Clock className="w-4 h-4" />;
  //     case 'approved':
  //       return <CheckCircle className="w-4 h-4" />;
  //     case 'rejected':
  //       return <XCircle className="w-4 h-4" />;
  //     default:
  //       return null;
  //   }
  // };
  //
  // const handleApprove = (orderId: number) => {
  //   setOrders(orders.map(order =>
  //     order.id === orderId ? { ...order, status: 'approved' } : order
  //   ));
  // };
  //
  // const handleReject = (orderId: number) => {
  //   setOrders(orders.map(order =>
  //     order.id === orderId ? { ...order, status: 'rejected' } : order
  //   ));
  // };

  const filteredOrders = orders.filter(order => {
    const matchesSearch =
        order.user?.realname.toLowerCase().includes(searchTerm.toLowerCase()) ||
        order.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        order.place.toLowerCase().includes(searchTerm.toLowerCase());

    // const matchesStatus = selectedStatus === 'all' || order.status === selectedStatus;

    return matchesSearch;
  });

  const queryList = async () => {
    const res = await Req(`/bsOrgTrain/list`)
    if (res.success) {
      setOrders(res.data)
    } else {
      alert(res.message)
    }
  };

  useEffect(() => {
    queryList()
  }, [])

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-900">培训订单</h1>
        <p className="text-gray-500">管理培训申请订单</p>
      </div>

      {/* 工具栏 */}
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center space-x-4">
          <div className="relative w-64">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="搜索订单..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          {/*<button*/}
          {/*  onClick={() => setShowFilters(!showFilters)}*/}
          {/*  className={`p-2 rounded-lg ${*/}
          {/*    showFilters ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'*/}
          {/*  }`}*/}
          {/*>*/}
          {/*  <Filter className="w-5 h-5" />*/}
          {/*</button>*/}
        </div>
      </div>

      {/* 筛选面板 */}
      {/*{showFilters && (*/}
      {/*  <div className="bg-white p-4 rounded-lg shadow-sm mb-6">*/}
      {/*    <div>*/}
      {/*      <label className="block text-sm font-medium text-gray-700 mb-2">状态</label>*/}
      {/*      <select*/}
      {/*        value={selectedStatus}*/}
      {/*        onChange={(e) => setSelectedStatus(e.target.value)}*/}
      {/*        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"*/}
      {/*      >*/}
      {/*        <option value="all">全部状态</option>*/}
      {/*        <option value="pending">待处理</option>*/}
      {/*        <option value="approved">已通过</option>*/}
      {/*        <option value="rejected">已拒绝</option>*/}
      {/*      </select>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*)}*/}

      {/* 订单列表 */}
      <div className="space-y-4">
        {filteredOrders.map(order => (
          <div
            key={order.id}
            className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300"
          >
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center space-x-4">
                <img
                    src={order.user.avatarUrl}
                  className="w-12 h-12 rounded-full"
                />
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">{order.title}</h3>
                  <div className="flex items-center text-sm text-gray-500">
                    <span className="mr-2">{order.user.realname}</span>
                    <span className="text-gray-400">({order.user.position})</span>
                  </div>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                {/*<span className={`flex items-center space-x-1 px-3 py-1 rounded-full text-sm ${getStatusStyle(order.status)}`}>*/}
                {/*  {getStatusIcon(order.status)}*/}
                {/*  <span>{getStatusText(order.status)}</span>*/}
                {/*</span>*/}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-6 mb-4">
              <div>
                <div className="text-sm text-gray-500 mb-1">培训时间</div>
                <div className="text-gray-900">{order.startDate} 至 {order.endDate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">培训地点</div>
                <div className="text-gray-900">{order.place}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">预计人数</div>
                <div className="text-gray-900">{order.expectedPersonCount} 人</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">人均预算</div>
                <div className="text-gray-900">¥{order.budget}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">提交时间</div>
                <div className="text-gray-900">{order.crtTime}</div>
              </div>
            </div>

            {order.notes && (
                <div className="mb-4">
                  <div className="text-sm text-gray-500 mb-1">备注说明</div>
                  <div className="text-gray-700 bg-gray-50 p-3 rounded-lg">{order.notes}</div>
              </div>
            )}

            {/*<div className="flex items-center justify-between">*/}
            {/*  <div className="text-sm text-gray-500">*/}
            {/*    申请时间：{order.createdAt}*/}
            {/*  </div>*/}
            {/*  {order.status === 'pending' && (*/}
            {/*    <div className="flex items-center space-x-3">*/}
            {/*      <button*/}
            {/*        onClick={() => handleReject(order.id)}*/}
            {/*        className="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"*/}
            {/*      >*/}
            {/*        拒绝*/}
            {/*      </button>*/}
            {/*      <button*/}
            {/*        onClick={() => handleApprove(order.id)}*/}
            {/*        className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"*/}
            {/*      >*/}
            {/*        通过*/}
            {/*      </button>*/}
            {/*    </div>*/}
            {/*  )}*/}
            {/*</div>*/}
          </div>
        ))}

        {orders.length === 0 && (
          <div className="text-center py-12 text-gray-500">
            暂无培训订单数据
          </div>
        )}
      </div>
    </div>
  );
}